<template>
  <div>
    <!-- <div id="x">{{x}}</div> -->
    <header>美食大全</header>
    <div class="swiper">
      <Swiper></Swiper>
    </div>
    <Search></Search>
    <HotCate></HotCate>
    <Top10></Top10>
  </div>
</template>

<script>
import { onMounted, ref, nextTick } from 'vue'
import Swiper from './Swiper'
import Search from './Search'
import HotCate from './HotCate'
import Top10 from './Top10'

import BScroll from 'better-scroll'

import { useStore } from 'vuex'

export default {
  components: {
    Swiper,
    Search,
    HotCate,
    Top10
  },

  setup() {
    // const swiperList = ref([])
    // const hotCateList = ref([])
    // const top10List = ref([])
    // const x = ref(0)

    const store = useStore()

    onMounted(async () => {
      
      // let hotCateResult = await axios.get('/api/hotcate')

      // swiperList.value = swiperResult.data.data.slice(0, 5)
      // top10List.value = swiperResult.data.data.slice(0, 10)
      // hotCateList.value = hotCateResult.data

      // console.log(document.querySelector('.main'))
      // event loop
      // nextTick(() => {
      //   new BScroll('.main', {})
      // })

      await store.dispatch('loadData')
      await store.dispatch('loadCateData')

      await nextTick()
      new BScroll('.main', {
        click: true
      })

      // vue模板渲染是异步的
      // x.value = 100
      // console.log(document.querySelector('#x').innerHTML)

    })

    return {
      // swiperList,
      // hotCateList,
      // top10List
      // x
    }
  }
}
</script>

<style lang='stylus' scoped>
div
  header
    height .44rem
    background #d5682a
    line-height .44rem
    text-align center
    font-size .18rem
    color #fff

.swiper
  height 0
  padding-bottom 66.6666667%
</style>